<template>
    <div class="page page-stadium-home has-headbar">
      <van-nav-bar
      fixed
      left-arrow
      :z-index="100"
      left-text="场馆"
      right-text=""
      @click-left="onClickLeft"
      @click-right="onClickRight">
      <!-- <div slot="right">
        <van-icon class="location-button" name="aim" />
      </div> -->
    </van-nav-bar>
      <section class="category-box">
        <van-loading class="cate-loading" v-if="categoryLoading"></van-loading>
        <van-swipe v-if="menuLists.length">
          <van-swipe-item v-for="(slide, index) in menuLists" :key="index">
            <div class="menu-list">
              <template  v-for="item in slide">
                  <router-link tag="div" class="menu-box"  :key="item.sportsTypeId" :to="{name: 'stadium-list', params:{id: item.sportsTypeId}}">
                    <div class="icon-box"><img :src="item.sportIcon"></div>
                    <div class="name">{{item.sportsName}}</div>
                  </router-link>
              </template>
            </div>
          </van-swipe-item>
        </van-swipe>
      </section>
      <search class="search-section" placeholder="请输入场馆名称" v-model="searchValue" @search="onSearch" />
      <section class="nearby-stadium">
        <div class="section-title">
          附近场馆
        </div>
        <div class="list">
          <empty-data :empty="stadiums.length === 0" :loading="nearLoading" text="附近暂无场馆"></empty-data>
          <stadium-item :key="index" v-for="(item, index) in stadiums" :itemData="item"></stadium-item>
        </div>
      </section>
    </div>
</template>

<script>
import { Swipe, SwipeItem, Loading } from 'vant'
import { mapGetters } from 'vuex'
import Search from '@/components/Search'
import StadiumItem from './components/StadiumItem'
import { API_VENUES_NEARBY, API_SPORT_TYPES } from '@/service/veneue'
import { wxjsdkMixin } from '@/components/mixins'
export default {
  mixins: [wxjsdkMixin],
  name: 'Home',
  components: {
    Search,
    StadiumItem,
    [Loading.name]: Loading,
    [Swipe.name]: Swipe,
    [SwipeItem.name]: SwipeItem
  },
  data () {
    return {
      swiperOption: {
        slidesPerView: 4,
        slidesPerColumn: 2,
        pagination: {
          el: '.swiper-pagination'
        }
      },
      searchValue: '',
      page: 1,
      menus: [],
      stadiums: [],
      nearLoading: false,
      categoryLoading: false
    }
  },
  computed: {
    menuLists () {
      let result = []
      for (let i = 0, len = this.menus.length; i < len; i += 8) {
        result.push(this.menus.slice(i, i + 8))
      }
      return result
    },
    ...mapGetters({
      userPosition: 'getUserPosition'
    })
  },
  watch: {
    userPosition: {
      handler (newValue) {
        this.requestNearbyStadiums()
      },
      deep: true
    }
  },
  mounted () {
    this.wechatHideMenu()
    this.requestSportsTypes()
    this.requestNearbyStadiums()
  },
  methods: {
    onClickLeft () {
      this.$router.push({ name: 'home' })
    },
    onClickRight () {

    },
    requestSportsTypes () {
      this.categoryLoading = true
      API_SPORT_TYPES({ isFree: 0 }).then(resData => {
        this.menus = resData.list
      }).finally(() => {
        this.categoryLoading = false
      })
    },
    // 搜索事件
    onSearch (value) {
      this.$router.push({ name: 'stadium-search', query: { search: value } })
    },
    requestNearbyStadiums () {
      let reqData = {
        lon: this.userPosition.lng,
        lat: this.userPosition.lat,
        isFree: 0
      }
      this.nearLoading = true
      API_VENUES_NEARBY(reqData).then((resData) => {
        this.stadiums = resData.list.resultList
      }).finally(() => {
        this.nearLoading = false
      })
    }
  }
}
</script>

<style lang="less">
.page-stadium-home{
  .location-button {
    padding: 0 15px;
  }
  .category-box{
    border-radius: 5px;
    box-shadow: 0px 0px 17.64px 0.36px rgba(44, 44, 44, 0.09);
    margin: 8px 10px;
    padding-bottom: 10px;
    height: 154.95px + 20px;
    .cate-loading{
      margin: 0 auto;
      padding-top: 70px;
    }
    .van-swipe {
      padding-bottom: 20px;
      height: 154.95px;
    }
    .van-swipe__indicators{
      bottom: 0px;
    }
    .van-swipe__indicator{
      background-color: #DEDEDE;
    }
    .van-swipe__indicator--active{
      background-color: #66CCFF;
    }
    .menu-list{
      display: flex;
      flex-wrap: wrap;
    }
    .menu-box{
      display: flex;
      width: 25%;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      margin-top: 22px;
      .icon-box {
        width: 24px;
        height: 24px;
        img{
          display: block;
          width: 100%;
          height: 100%;
        }
      }
      .name {
        text-align: center;
        color: #373737;
        line-height: 1;
        margin-top: 19/2px;
      }
    }
  }
  .search-section{
    margin: 13px auto 43/2px;
  }
  .nearby-stadium {
    margin-top: 25/2px;
    .loading {
      margin: 10px auto;
    }
    .list{
      padding: 0 10px;
      margin-top: 10px;
      overflow: hidden;
    }
  }
}
</style>
